<script>
import axios from '../../axios/axiosHelper.js'

export default {
  name: "demo",
  data() {
    return {
      users: [],
      loading: false,
      selectedDate: new Date()
    }
  },
  created() {
    this.loadUsers()
  },
  methods: {
    async loadUsers() {
      this.loading = true
      try {
        const response = await axios.get('/users/list?limit=100&offset=0&field=&code=')
        console.log('API响应:', response.data)
        
        // 处理不同的数据结构
        if (response.data && response.data.data) {
          this.users = response.data.data
        } else if (Array.isArray(response.data)) {
          this.users = response.data
        } else {
          this.users = []
        }
        
        // 如果没有数据，添加一些测试数据用于展示
        if (this.users.length === 0) {
          this.users = [
            {
              id: 1,
              name: 'admin',
              realName: '管理员',
              pass: '123456',
              no: 'A001',
              tel: '13800138000',
              url: '/uploads/avatar1.jpg'
            },
            {
              id: 2,
              name: 'teacher01',
              realName: '张老师',
              pass: '123456',
              no: 'T001',
              tel: '13800138001',
              url: '/uploads/avatar2.jpg'
            },
            {
              id: 3,
              name: 'student01',
              realName: '李同学',
              pass: '123456',
              no: 'S001',
              tel: '13800138002',
              url: '/uploads/avatar3.jpg'
            },
            {
              id: 4,
              name: 'teacher02',
              realName: '王老师',
              pass: '123456',
              no: 'T002',
              tel: '13800138003',
              url: '/uploads/avatar4.jpg'
            }
          ]
        }
        
        console.log('处理后的用户数据:', this.users)
      } catch (error) {
        console.error('加载用户数据失败:', error)
        // 加载失败时也显示测试数据
        this.users = [
          {
            id: 1,
            name: 'admin',
            realName: '管理员',
            pass: '123456',
            no: 'A001',
            tel: '13800138000',
            url: '/uploads/avatar1.jpg'
          }
        ]
      } finally {
        this.loading = false
      }
    },
    
    // 获取用户角色标签类型
    getRoleType(no) {
      if (no.startsWith('A')) return 'danger'  // 管理员
      if (no.startsWith('T')) return 'warning' // 教师
      if (no.startsWith('S')) return 'success' // 学生
      return 'info'
    },
    
    // 获取用户角色名称
    getRoleName(no) {
      if (no.startsWith('A')) return '管理员'
      if (no.startsWith('T')) return '教师'
      if (no.startsWith('S')) return '学生'
      return '未知'
    },
    
    // 查看用户详情
    viewUser(user) {
      this.$message.info(`查看用户 ${user.realName} 的详情`)
    },
    
    // 编辑用户
    editUser(user) {
      this.$message.info(`编辑用户 ${user.realName}`)
    },
    
    // 退出登录
    logout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除登录状态
        localStorage.removeItem('userToken')
        sessionStorage.removeItem('userInfo')
        this.$message.success('退出登录成功')
        // 跳转到登录页
        this.$router.push('/login')
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    },
    
    // 日历日期选择事件
    onDateSelect(date) {
      this.selectedDate = date
      this.$message.success(`选择了日期: ${date.toLocaleDateString()}`)
    }
  }
}
</script>

<template>
  <div class="demo-container">
    <div class="demo-header">
      <h2>用户信息卡片</h2>
    </div>
    
    <div class="demo-content" v-loading="loading" element-loading-text="加载中...">
      <div class="content-layout">
        <div class="card-section">
          <div class="card-grid">
            <el-card 
              v-for="user in users" 
              :key="user.id" 
              class="user-card"
              shadow="hover"
            >
              <template #header>
                <div class="card-header">
                  <div class="user-avatar">
                    <el-avatar :size="50" :src="user.url" :alt="user.realName">
                      {{ user.realName.charAt(0) }}
                    </el-avatar>
                  </div>
                  <div class="user-basic">
                    <h3>{{ user.realName }}</h3>
                    <el-tag :type="getRoleType(user.no)" size="small">
                      {{ getRoleName(user.no) }}
                    </el-tag>
                  </div>
                </div>
              </template>
              
              <div class="card-content">
                <div class="info-item">
                  <span class="label">姓名：</span>
                  <span class="value">{{ user.realName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">账号：</span>
                  <span class="value">{{ user.name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">密码：</span>
                  <span class="value password">{{ user.pass }}</span>
                </div>

              </div>
              
              <template #footer>
                <div class="card-actions">
                  <el-button size="small" type="primary" @click="viewUser(user)">查看详情</el-button>
                  <el-button size="small" type="warning" @click="editUser(user)">编辑</el-button>
                  <el-button size="small" type="danger" @click="logout()">退出登录</el-button>
                </div>
              </template>
            </el-card>
          </div>
        </div>
        
        <div class="calendar-section">
          <el-card class="calendar-card" shadow="hover">
            <template #header>
              <div class="calendar-header">
                <h3>日历</h3>
                <span class="selected-date">选中日期: {{ selectedDate.toLocaleDateString() }}</span>
              </div>
            </template>
            <el-calendar v-model="selectedDate" @input="onDateSelect">
              <template #date-cell="{data}">
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split('-').slice(1).join('-') }}
                  {{ data.isSelected ? '✓' : '' }}
                </p>
              </template>
            </el-calendar>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
}

.demo-header h2 {
  color: #303133;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.demo-content {
  background: transparent;
  border-radius: 8px;
  padding: 0;
}

.content-layout {
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: flex-start;
}

.card-section {
  flex: 1;
  min-width: 0;
}

.calendar-section {
  width: 500px;
  flex-shrink: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.user-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
}

.user-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.user-avatar {
  flex-shrink: 0;
}

.user-basic h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.card-content {
  padding: 10px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  color: #909399;
  font-size: 14px;
  font-weight: 500;
  min-width: 80px;
}

.info-item .value {
  color: #303133;
  font-size: 14px;
  font-weight: 400;
  text-align: right;
}

.info-item .value.password {
  font-family: 'Courier New', monospace;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  background-color: #fafbfc;
  border-bottom: 1px solid #e4e7ed;
}

:deep(.el-card__body) {
  padding: 15px 20px;
}

:deep(.el-card__footer) {
  padding: 15px 20px;
  background-color: #fafbfc;
  border-top: 1px solid #e4e7ed;
}

:deep(.el-button) {
  margin: 0;
}

:deep(.el-tag) {
  font-weight: 500;
}

:deep(.el-avatar) {
  background-color: #409eff;
  color: white;
  font-weight: 600;
}

.calendar-card {
  border-radius: 16px;
  border: 1px solid #e4e7ed;
  background: white;
  color: #303133;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.calendar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  background: #fafbfc;
  border-radius: 12px;
  padding: 16px 20px;
  margin: -5px;
  border-bottom: 1px solid #e4e7ed;
}

.calendar-header h3 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-header h3::before {
  content: '📅';
  font-size: 20px;
}

.selected-date {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
  background: #f0f2f5;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid #dcdfe6;
}

.calendar-section :deep(.el-calendar) {
  background: transparent;
  border: none;
  color: #303133;
  font-size: 14px;
}

.calendar-section :deep(.el-calendar__header) {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  color: #303133;
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #e4e7ed;
}

.calendar-section :deep(.el-calendar__body) {
  background: #fafbfc;
  border-radius: 8px;
  padding: 8px;
  border: 1px solid #e4e7ed;
}

:deep(.el-calendar-table) {
  border-radius: 8px;
  overflow: hidden;
}

.calendar-section :deep(.el-calendar-table .el-calendar-day) {
  height: 45px;
  border: 1px solid #e4e7ed;
  background: white;
  transition: all 0.2s ease;
  cursor: pointer;
}

.calendar-section :deep(.el-calendar-table .el-calendar-day:hover) {
  background: #f0f2f5;
  border-color: #409eff;
}

.calendar-section :deep(.el-calendar-table td.is-selected .el-calendar-day) {
  background: #409eff !important;
  border-color: #409eff !important;
}

.calendar-section :deep(.el-calendar-table .is-selected p) {
  color: white !important;
  font-weight: 600;
}

.calendar-section :deep(.el-calendar-table th) {
  background: #f5f7fa;
  color: #606266;
  font-weight: 500;
  padding: 8px;
  border: 1px solid #e4e7ed;
}

.calendar-section :deep(.el-calendar-table p) {
  color: #606266;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

:deep(.el-calendar-table .prev, .el-calendar-table .next) {
  opacity: 0.4;
}

:deep(.el-calendar-table .current) {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  color: white;
  font-weight: 700;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-layout {
    flex-direction: column;
  }
  
  .calendar-section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-container {
    padding: 10px;
  }
  
  .content-layout {
    padding: 10px;
    gap: 15px;
  }
  
  .calendar-section {
    width: 100%;
  }
  
  .calendar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
  }
  
  .calendar-header h3 {
    font-size: 20px;
  }
  
  .selected-date {
    font-size: 14px;
    padding: 6px 10px;
  }
  
  :deep(.el-calendar__header) {
    padding: 15px 20px;
    font-size: 16px;
  }
  
  :deep(.el-calendar__body) {
    padding: 15px;
  }
  
  :deep(.el-calendar-table .el-calendar-day) {
    height: 50px;
  }
  
  :deep(.el-calendar-table th) {
    padding: 12px 6px;
    font-size: 12px;
  }
}
</style>